<template>
  <div class="shipcourse">
    <!-- 当前与下一站站点 -->
    <div class="course-site">
      <ul>
        <li v-for="(sites, index) in site" :key="index">
          <p>
            <span>{{ sites.text }}:</span> {{ sites.sites }}
          </p>
          <p><span>到达时间：</span>{{ sites.timing }}</p>
          <p><span>出发时间：</span>{{ sites.timd }}</p>
          <p><span>应载乘客：</span>{{ sites.mans }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "shipcourse",
  data() {
    return {
      site: [
        {
          text: "当前站点",
          sites: "朝天门站台",
          timing: "13.50",
          timed: "14:20",
          mans: 26
        },
        {
          text: "下一站点",
          sites: "万州站台",
          timing: "15.50",
          timed: "16:20",
          mans: 32
        },
        {
          text: "下一站点",
          sites: "万州站台s",
          timing: "15.50",
          timed: "16:20",
          mans: 32
        },
        {
          text: "下一站点",
          sites: "万州站台d",
          timing: "15.50",
          timed: "16:20",
          mans: 32
        },
        {
          text: "下一站点",
          sites: "万州站台d",
          timing: "15.50",
          timed: "16:20",
          mans: 32
        }
      ]
    };
  },
  fliters: {
    mans(val) {
      return `${val}人`;
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/css/shipCourse.less";
</style>
